<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();

const api_info = ref('')

const tableData = ref([{
    id: 1,
    interfaceName: "测试",
    createUser: "cq",
    updateTime: '20250102'
}])

const addInterface = () => {
    router.push("/interfaceManage/add");
    console.log("123")
}

</script>

<template>
    <el-card>
        <div class="inter-header">
            <div class="inter-left">
                <el-input class="inter-search-input" v-model="api_info" style="width: 240px" placeholder="请输入接口信息"
                    clearable />
                <el-button class="inter-search-button">搜索</el-button>
            </div>
            <div class="inter-right">
                <el-button type="success" @click="addInterface">新增接口</el-button>
            </div>
        </div>

        <div class="inter-table">
            <el-table :data="tableData">
                <el-table-column prop="id" label="No." width="180"></el-table-column>
                <el-table-column prop="interfaceName" label="接口名称" width="600"></el-table-column>
                <el-table-column prop="createUser" label="创建人" width="300"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间" width="300"></el-table-column>
                <el-table-column label="操作">
                    <template #>
                        <el-button link type="primary" size="small">修改</el-button>
                        <el-button link type="primary" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>

</template>

<style lang="scss" scoped>
.inter-header {
    display: flex;
    justify-content: space-between;

    .inter-search-input {
        margin-right: 5px;
    }
}
</style>